<script setup lang="ts">
import { getQclLeftData } from '@/api/Quancheng';
import potencyImg from '@/assets/largescreen/potency-icon.png';
import pressureImg from '@/assets/largescreen/pressure-icon.png';
import flowImg from '@/assets/largescreen/flow-icon.png';

const equipmentName = [
  {
    name: '压力变送器'
  },
  {
    name: 'DTU',
    name2: '管道阀门'
  },
  {
    name: '埋地式',
    name2: '挂壁式'
  }
];
const equipmentQcl = ref([]);
const emit = defineEmits(['postMessage']);

// 清理数据，确保可以被postMessage传递
const sanitizeData = (data: any): any => {
  try {
    // 使用JSON序列化/反序列化来清理数据，移除不可克隆的对象
    return JSON.parse(JSON.stringify(data));
  } catch (error) {
    console.warn('数据序列化失败，使用空数组:', error, data);
    return [];
  }
};

//点击向3d图传值
const postMessage = (data, name) => {
  try {
    // 清理数据确保可以传递
    const cleanData = sanitizeData(data);
    emit('postMessage', cleanData, name, '');
  } catch (error) {
    console.error('postMessage数据处理失败:', error, { data, name });
    // 发送空数组作为后备
    emit('postMessage', [], name, '');
  }
};
onMounted(async () => {
  try {
    const { data } = await getQclLeftData({ type: 'equipmentOverhaulQcl' });
    equipmentQcl.value = data.monitoringForceList;
  } catch (error) {
    console.warn(error, '获取泉城路监测力量失败!');
  }
});
</script>

<template>
  <div class="blue-box">
    <div class="blue-box-item" v-for="(item, index) in equipmentQcl" :key="index" @click="postMessage(item.equipmentOverhaulQcls, item.name)">
      <div class="blue-box-item-top">
        <div class="blue-box-item-top-left">
          <div class="top-font">{{ item.total }}</div>
          <div class="bottom-font">
            <span>{{ item.name }}</span>
          </div>
        </div>
        <div class="blue-box-item-top-right">
          <img :src="index == 0 ? potencyImg : index == 1 ? pressureImg : flowImg" alt="" />
        </div>
        <div class="blue-box-item-mid"></div>
      </div>
      <div class="blue-box-item-bottom">
        <div class="blue-box-item-bottom-left" :class="{ 'pic-left': index == 0, 'pic-mid': index == 1, 'pic-right': index == 2 }">
          <div :title="equipmentName[index].name">{{ equipmentName[index].name }}</div>
        </div>
        <div
          class="blue-box-item-bottom-left"
          v-if="index != 0"
          :class="{ 'pic-left-2': index == 0, 'pic-mid-2': index == 1, 'pic-right-2': index == 2 }"
        >
          <div :title="equipmentName[index].name2">{{ equipmentName[index].name2 }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.blue-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: white;

  .blue-box-item {
    cursor: pointer;
    box-sizing: border-box;
    padding: 0.875rem 0.9375rem;
    width: 100%;
    height: 31%;
    background-image: url(@/assets/largescreen/blue-box.png);
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 10px;

    .blue-box-item-top {
      width: 100%;
      height: 45%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: center;

      .blue-box-item-mid {
        width: 90%;
        height: 0.125rem;
        background-color: #1e7196;
        margin: auto;
      }

      .blue-box-item-top-left {
        width: 50%;
        height: 80%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .top-font {
          color: #00ffff;
          font-weight: 700;
          font-size: 24px;
        }

        .bottom-font {
          display: flex;
          flex-direction: column;
        }
      }

      .blue-box-item-top-right {
        display: flex;
        justify-content: center;

        img {
          width: 100px;
          height: 80px;
        }
      }
    }

    .blue-box-item-bottom {
      width: 100%;
      height: 55%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      .blue-box-item-bottom-right,
      .blue-box-item-bottom-left {
        width: 50%;
        position: relative;

        div {
          width: 100%;
          position: absolute;
          bottom: -17%;
          left: 50%;
          transform: translateX(-50%);
          font-size: 0.625rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: center;
        }
      }

      .blue-box-item-bottom-left {
        height: 80%;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 50% 50%;
      }

      .pic-left {
        background-image: url(@/assets/quanchengRdImage/maidishi.png);
      }

      .pic-mid {
        background-image: url(@/assets/quanchengRdImage/wulianwangzhongduan.png);
      }

      .pic-mid-2 {
        background-image: url(@/assets/quanchengRdImage/qianjun.png);
      }

      .pic-right {
        background-image: url(@/assets/quanchengRdImage/maidishijiguang.png);
      }

      .pic-right-2 {
        background-image: url(@/assets/quanchengRdImage/biguashi.png);
      }

      .blue-box-item-bottom-right {
        .bottom-right-bottom-font,
        .bottom-right-top-font {
          width: 90%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          :first-child {
            color: #a7ffc9;
          }

          :last-child {
            color: #43ff8b;
            font-weight: 700;
            font-size: 1.5rem;
          }
        }

        .bottom-right-bottom-font {
          margin-top: 0.625rem;
        }
      }
    }
  }
}

@media (min-width: 3840px) {
  .blue-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: white;
    .blue-box-item {
      width: 33%;
      height: 100%;
    }
  }
}
</style>
